<script lang="ts" setup>
import { NTable, NEllipsis, NH3, NSpace } from 'naive-ui'
import { useFlowStore } from '../flowStore'

const flowStore = useFlowStore()
</script>
<template>
    <n-space vertical>
        <div>
            <n-h3>表单参数</n-h3>
            <n-table :bordered="false" size="small">
                <thead>
                    <tr>
                        <th style="width:100px;">参数编码</th>
                        <th style="width:100px;">参数名称</th>
                        <th style="width:100%;">备注/可选值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="component in flowStore.formComponentList" :key="component.componentCode">
                        <td><n-ellipsis style="max-width: 100px">{{ component.componentCode }}</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">{{ component.componentName }}</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%">{{ JSON.stringify(component.componentOptions)
                        }}</n-ellipsis>
                        </td>
                    </tr>
                </tbody>
            </n-table>
        </div>
        <div>
            <n-h3>用户参数</n-h3>
            <n-table :bordered="false" size="small">
                <thead>
                    <tr>
                        <th style="width:100px;">参数编码</th>
                        <th style="width:100px;">参数名称</th>
                        <th style="width:100%;">备注/可选值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">userId</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户编码</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%"></n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">userName</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户名称</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%"></n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">orgCode</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户部门编码</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%"></n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">sex</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户性别</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%">字典【SEX】</n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">nationality</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户民族</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%">字典【NATIONALITY】</n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">idType</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户证件类型</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%">字典【ID_TYPE】</n-ellipsis></td>
                    </tr>
                    <tr>
                        <td><n-ellipsis style="max-width: 100px">birthday</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100px">用户出生日期</n-ellipsis></td>
                        <td><n-ellipsis style="max-width: 100%"></n-ellipsis></td>
                    </tr>
                </tbody>
            </n-table>
        </div>
    </n-space>
</template>
<style scoped></style>